<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a href="#">Facility</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">Milk Run</a>
        </li>
    </ul>
</div>
<div class="container-fluid" style="margin:15px">
    <div class="row">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <span ng-show="isAddAction" class="caption-subject bold"> Add Milk Run</span>
                    <span ng-show="!isAddAction" class="caption-subject bold"> Edit Milk Run</span>
                </div>

            </div>
            <div class="portlet-body form">
                <form novalidate name="milkRunForm" ng-submit="milkRunForm.$valid && addOrUpdateMilkRun()">
                    <div class="alert alert-danger display-hide" ng-show="milkRunForm.$invalid && milkRunForm.$submitted" style="display: block;">
                        <button class="close" data-close="alert"></button> You have some form errors. Please check below.
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row form-group">
                                <div class="col-md-4">
                                    <label>Customer</label>
                                    <input-validation-message field="customer" form="milkRunForm"></input-validation-message>
                                    <organization-auto-complete ng-model="longHaulView.customerId" name="customer" allow-clear="true" tag="Customer" required="true"></organization-auto-complete>
                                </div>
                                <div class="col-md-4">
                                    <label>Pick Up Week Date</label>

                                    <ui-select multiple name="longHaulShipDay" ng-model="longHaulView.longHaulShipDay" class="form-control">
                                        <ui-select-match allow-clear="true">
                                            <div ng-bind="$item"></div>
                                        </ui-select-match>
                                        <ui-select-choices repeat="longHaulShipDay in longHaulShipDays | filter: $select.search">
                                            <div ng-bind="longHaulShipDay"></div>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                                <div class="col-md-4">
                                    <label>Longhaul No.</label>
                                    <input-validation-message field="longHaulNo" form="milkRunForm"></input-validation-message>
                                    <input type="text" name="longHaulNo" ng-model="longHaulView.longHaulNo" class="form-control" required="true" />
                                </div>


                            </div>
                            <div class="row form-group">

                                <div class="col-md-4">
                                    <label>Description</label>
                                    <input type="text" name="description" ng-model="longHaulView.description" class="form-control" />
                                </div>

                                <div class="col-md-4">
                                    <label>Schedule Time</label>
                                    <input type="text" ng-model="longHaulView.scheduleTime" class="form-control" />
                                </div>
                                <div class="col-md-4">
                                    <label>Auto Assign Sequence</label>
                                    <md-switch class="md-primary" aria-label="Auto Assign Sequence" ng-change="autoAssignSequenceOnChange(longHaulView.autoAssignSequence)"
                                        ng-model="longHaulView.autoAssignSequence" style="margin-top: 0;margin-bottom: 0;"></md-switch>
                                </div>

                            </div>
                            <div class="tab-pane ">

                                <div class="form-section">
                                    <span>LongHaul Stops</span>
                                    <span style="float:right;font-size:14px" ng-show="longHaulView.customerId != null">
                                        <a ng-click="addStops()"><b>Add Stops</b></a>
                                    </span>
                                    <span style="float:right; font-size:14px; color: #999; cursor: no-drop;" title="select customer first"
                                          ng-show="longHaulView.customerId == null">
                                        <b>Add Stops</b>
                                    </span>
                                </div>


                                <div class="table-scrollable">
                                    <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" id="sample_1"
                                        role="grid" aria-describedby="sample_1_info">
                                        <thead>
                                            <tr role="row">
                                                <th>Sequence</th>
                                                <th>Address Store No.</th>
                                                <th>Retailer</th>
                                                <th>Address Name </th>
                                                <th>Schedule Time</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="address in selectAddresses track by $index">
                                                <td style="width:70px;text-align:center;line-height:30px">

                                                    {{$index+1}}

                                                    <div style="width: 16px;float: right;">
                                                        <a ng-if="$index==0" style="float:right;height:16px;width:14px"> </a>
                                                        <a ng-if="$index>0" style="float:right" class="expand-a expand" ng-click="changeAheadSequence($index)"> </a>
                                                        <a style="float:right"  ng-if="$index+1 != selectAddresses.length" class="expand-a collapse" ng-click="changeBehindSequence($index)"> </a>
                                                    </div>

                                                </td>
                                                <td style="vertical-align:middle">{{address.storeNo}}</td>
                                                <td style="vertical-align:middle">{{address.organizationName}}</td>
                                                <td style="vertical-align:middle">{{address.name}}</td>                                          
                                                <td style="vertical-align:middle">
                                                    <!--<lt-date-time date-format="HH:mm:ss" ng-model="address.scheduleTime" value="address.scheduleTime "></lt-date-time>-->
                                                    <input type="text" class="form-control" ng-model="address.scheduleTime" />
                                                </td>
                                                <td style="vertical-align:middle">
                                                    <a ng-click="removeStop($index)">Remove</a></td>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                            <div class=" row form-actions right">
                                <waitting-btn type="submit" btn-class="btn blue" value="submitLabel" is-loading="loading"></waitting-btn>
                                <button type="button" class="btn default" ng-click="cancelEditLocation()">Cancel</button>
                            </div>
                        </div>

                </form>
                </div>
            </div>
        </div>
    </div>